<div id="tb<?php echo $uniqid;?>" style="">
    <el-container>
        <el-header style="height: 40px;">第1步：选择商品</el-header>
        <el-container>
            <el-aside style="width:200px;">
                <el-tree
                    :data="category"
                    :props="categoryProps"
                    node-key="id"
                    indent="5"
                    highlight-current="true"
                    accordion
                    @node-click="categoryClick">
                </el-tree>
            </el-aside>
            <el-main id="scoreshopWaitGoodsListMain" style="border-left: 2px solid #2c3e50; height: 616px; padding: 0;">
                <div id="sssgtbToolBar" class="easyui-panel">
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td>
                                <input id="scoreshopWaitGoodsKeywords" style="width:200px" type="text" placeholder="请输入商品的ID或商品名称"
                                                  class="easyui-input textbox" v-model="selectCategory.keywords">
                            </td>
                            <td><span style="line-height:30px;">价格区间</span>
                                <input id="scoreshopWaitGoodsMinPrice" v-model="selectCategory.minprice" style="width:50px" placeholder="最低价格" type="text"
                                       class="easyui-input textbox">
                                -
                                <input id="scoreshopWaitGoodsMaxPrice" v-model="selectCategory.maxprice" style="width:50px" placeholder="最高价格" type="text"
                                       class="easyui-input textbox"></td>
                            <td><a href="javascript:void(0);" @click="searchScoreGoods" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <table id="scoreshopWaitGoodsList"></table>
            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    var scoreshopAddVm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            category: JSON.parse('<?php echo addslashes($category);?>'),
            categoryProps:{
                label:'text',
                children:'children',
            },
            selectCategory: {
                category_id:0,
                keywords: '',
                minprice: '',
                maxprice: '',
            },
        },
        methods: {
            inputChange() {
                this.$forceUpdate();
            },
            submit: function(){
                $.post('/admin/scoreshop/getgoodsskuprice', scoreshopAddVm.params, function(data){
                    if(data.ret===0){
                        $("#scoreshopManagedlg").dialog('close');
                        scoreshopManageEdit(scoreshopAddVm.params.goods_id, '新增积分商品');
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                });
            },
            categoryClick: function (selectData){
                if('undefined' === typeof selectData.children) {
                    scoreshopAddVm.selectCategory.category_id = selectData.id
                    $("#scoreshopWaitGoodsList").datagrid('load');
                }
            },
            searchScoreGoods: function (){
                $("#scoreshopWaitGoodsList").datagrid('load');
            }
        }
    });
    $('#scoreshopsubmit').click(function(data){
        let selectRow = $("#scoreshopWaitGoodsList").datagrid('getSelections');
        if(selectRow.length){
            scoreshopAddVm.params.goods_id = selectRow[0].id;
            scoreshopAddVm.params.mode = 'check';
            scoreshopAddVm.submit();
        }else{
            $.messager.alert('提示', '没有选择商品！', 'warning');
        }

    })
    var scoreshopAddGoodsSearch = function () {
        var height = $('#scoreshopWaitGoodsList').parent().height();
        var width = $('#scoreshopWaitGoodsList').parent().width();
        $("#scoreshopWaitGoodsList").datagrid({
            title: '待选择商品列表',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 20, 50, 100],
            method: 'post',
            sortName: 'created_at',
            sortOrder: 'desc',
            idField: 'id',
            url: '/admin/scoreshop/getgoods',
            queryParams: scoreshopAddVm.selectCategory,
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            loadMsg:'正在处理，请稍后。。。',
            toolbar: '#sssgtbToolBar',
            columns: [[
                {field:'id',title:'ID', width: fixWidth(10), align: "center", halign: 'center'},
                {field:'title',title:'商品名称', width: fixWidth(50), align: "center", halign: 'center', formatter:function (value,rowData,rowIndex){
                    let goods_info = '';
                    if(rowData.image){
                        goods_info += '<div style="display: flex" class="goodsinfo_wenzi">';
                        goods_info += '<div style="width: 32px; display: flex; align-items: center;">' +
                            '<img style="width: 30px; height: 30px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" src="'+rowData.image+'">' +
                            '</div>';
                        goods_info += '<div style="width: calc(100% - 42px); padding-left: 10px; text-align: left;">';
                    }else{
                        goods_info += '<div class="goodsinfo_wenzi" style="text-align: left;">';
                    }
                    goods_info += value + '<br><span>';
                    goods_info += rowData.is_sku?'多规格':'单规格';
                    goods_info += '</span></div>';
                    if(rowData.image){goods_info += '</div>';}
                    return goods_info;
                }},
                {field:'price',title:'单价', width: fixWidth(20), align: "center", halign: 'center', formatter:function (value,rowData,rowIndex){
                        return value + '元';
                    }},
                {field:'stock',title:'库存', width: fixWidth(20), align: "center", halign: 'center', formatter:function (value,rowData,rowIndex){
                        return value + '件';
                    }},
            ]],
            onClickRow: function(index, rowData){
                $(this).datagrid('getPanel').find("tr.goods-row-selected").removeClass('goods-row-selected');
                $(this).datagrid('getPanel').find("tr[datagrid-row-index="+index+"]").addClass('goods-row-selected');
            },
        });
    };
    onDatagridResize("#scoreshopWaitGoodsList");
    scoreshopAddGoodsSearch();
</script>
<style>
    .el-header {
        background-color: #2c3e50;
        color: #FFFFFF;
        text-align: left;
        line-height: 40px;
        text-indent: 2em;
        font-size: 1.2em;
        font-weight: bold;
    }

    .goodsinfo_wenzi span{
        color: #ee650c;
    }

    .goods-row-selected{
        background: #b3f1c7;
        color: rgb(213, 19, 19);
    }

    #scoreshopWaitGoodsListMain td{
        line-height: 1.2em !important;
        padding: 3px 0 !important;
    }
</style>